<template>
    <view class="content">
		<slot name="zshare" />
		<view class="z-share-hide">
			<canvas style="height: 750px;width: 1334px;backgroundColor: #FFFFFF" canvas-id="firstCanvas"></canvas>
			<tki-qrcode
				ref="qrcode"
				:val="val"
				:size="200"
				background="#fff"
				foreground="#000"
				pdground="#000"
				:onval="false"
				:loadMake="false"
				@result="qrR"
				:show="false"
			></tki-qrcode>
		</view>
    </view>
</template>

<script>
import tkiQrcode from './tki-qrcode/tki-qrcode.vue';
export default {
    name: 'canvas-drawer',
    components: {
        tkiQrcode
    },
	props:{
		// 绘制成二维码的地址
		val:{
			type:String,
			default: ''
		},
		// 绘制成背景图的地址
		cover:{
			type:String,
			default: ''
		},
		// 绘制成头像的地址
		avatar:{
			type:String,
			default: ''
		},
		// 绘制的年龄
		age:{
			type:[String,Number],
			default: ''
		},
		// 绘制的定位
		address:{
			type:String,
			default: ''
		},
		// 绘制的昵称
		nickname:{
			type:String,
			default: ''
		}
	},
    data() {
        return {
			
        };
    },
    methods: {
        qrR(path) {
            let that = this;
            let ctx = uni.createCanvasContext('firstCanvas');
			
			uni.getImageInfo({
				src:that.avatar,
				success(res){
					ctx.drawImage(that.cover,0,0,375,667);
					ctx.setFillStyle('#8667F7')
					ctx.font = `10px Arial`;//绘制文字
					ctx.fillText(`${that.nickname}邀请你加入`,145,40);
					
					ctx.setFillStyle('#414352')
					ctx.font = `12px Arial`;//绘制文字
					ctx.fillText(`年龄${that.age}岁`,120,380,820,300);
					ctx.fillText(`地点${that.address}`,200,380,820,300);
					//二维码
					
					uni.getImageInfo({
						src:that.val,
						success(codeinfo){
							// console.log(codeinfo);
							ctx.drawImage(codeinfo.path,120,445,139,139);
							
							// 通过arc来绘制一个圆形区域 画头像
							ctx.arc(187, 195, 100, 0, 2 * Math.PI)
							// ctx.fillStyle="#fff";//设置填充颜色
							ctx.fill()//保证图片无bug填充
							ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
							ctx.drawImage(res.path, 90, 90, 210, 210);
							
							ctx.draw(false, () => {
								uni.canvasToTempFilePath({
									x: 0,
									y: 0,
									width: 375,
									height: 667,
									destWidth: 375,
									destHeight: 667,
									canvasId: 'firstCanvas',
									success: function(ress) {
										// console.log(ress)
										uni.saveImageToPhotosAlbum({
											filePath: ress.tempFilePath,
											success: function() {
												uni.share({
													provider: "weixin",
													scene: "WXSceneSession",
													type: 2,
													imageUrl: ress.tempFilePath,
													success: function (res) {
														// console.log("success:" + JSON.stringify(res));
													},
													fail: function (err) {
														// console.log("fail:" + JSON.stringify(err));
													}
												});
												// console.log('save success');
											}
										});
									},
									fail(e) {
										// console.log(e);
										uni.showToast({
											title: '生成海报失败',
											icon: 'none'
										});
									}
								});
							});
						},
						fail(){},
					})
				},
				fail(err){
					// console.log(err);
				}
			})
			
			
			
        },
        saveToAlbum() {
			this.qrR();
            // this.$refs.qrcode._makeCode();
        }
    }
};
</script>

<style lang="scss">
.z-share-hide{
	width: 0;
	height: 0;
	overflow: hidden; 
}
</style>